<template>
  <div class="container">
    <div style="border: 1px solid #ccc; margin-bottom: 10px">
      <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"/>
      <Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig"
              @onChange="handleChange"
              @onCreated="handleCreated"/>
    </div>
    <!-- <el-button type="primary" @click="syncHTML">提交</el-button> -->

    <el-dialog v-model="visible" width="1300px" destroy-on-close :close-on-click-modal="false" @close="closeDialog">
      <imageSelector v-if="insertType == 1" :update="updateData"/>
      <videoSelector v-if="insertType == 2" :update="updateData"/>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="editor">
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import {onBeforeUnmount, ref, reactive, shallowRef, onMounted} from 'vue';
import {Editor, Toolbar} from '@wangeditor/editor-for-vue';
import {IToolbarConfig} from "@wangeditor/editor";
import registerMenu from "./editor/Index"
import imageSelector from './image-selector.vue';
import videoSelector from './video-selector.vue';

const props = defineProps({
  data: {
    type: String,
    required: false
  },
  update: {
    type: Function,
    required: true
  }

});

const insertType = ref(1);

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
const valueHtml = ref("");

const init = (str: string) => {
  valueHtml.value = str;
}
// 第二步：暴露方法
defineExpose({init})

console.log(props.data);
// 模拟 ajax 异步获取内容
onMounted(() => {
});

const toolbarConfig: Partial<IToolbarConfig> = {
  excludeKeys: [
    "group-image", // 图片上传：本地上传+网络图片
    "group-video", // 视频上传：本地上传+网络视频
    "fullScreen"
  ]
}
const editorConfig = {placeholder: '请输入内容...'};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const handleCreated = (editor: any) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
  registerMenu(editorRef.value, toolbarConfig); // 注册自定义菜单。这个是5.4那边声明的
  initMediaMenuEvent(); // 注册自定义菜单点击事件
};


// 事件监听
const initMediaMenuEvent = () => {
  const editor = editorRef.value;

  editor.on('ImageMenuClick', () => {
    // 你点击了图片菜单
    insertType.value = 1;
    visible.value = true;
    console.log("你点击了图片菜单")
  });
  editor.on('VideoMenuClick', () => {
    // 你点击了视频菜单
    insertType.value = 2;
    visible.value = true;
    console.log("你点击了视频菜单")
  });
}

const insertImage = (img) => {
  if (insertType.value == 1) {
    editorRef.value.insertNode({
      type: 'image',
      src: img.resourceUrl,
      alt: img.title + "/*/" + img.des + "/*/" + img.publishTime + "/*/" + img.hqResourceUrl,
      // title:img.title,
      // des:img.des,
      // time:img.publishTime,
      children: [{
        text: 'abcdsd'
      }]
    })
  } else {
    editorRef.value.insertNode({
      type: 'video',
      src: img.resourceUrl,
      alt: img.title + "/" + img.des + "/" + img.publishTime,
      children: [{
        text: ''
      }]
    })
    let videoDownload = `<div class="video-download-container"><div class="video-title">${img.title}</div><div class="em-more-btn" @click="downloadClick("${img.resourceUrl}")">Downlaod Video</div></div>`

  }

}

const visible = ref(false);
const updateData = (obj) => {
  closeDialog();
  insertImage(obj)
};
const closeDialog = () => {
  visible.value = false;
};

const handleChange = () => {
  props.update(valueHtml.value)
};
</script>

<style></style>
